<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
        /* 1.将矩形元素变成绿色 */
        svg rect{
            fill:green
        }
        /* 2.设置条形图文本的样式 */
        svg text{
            fill:"pink";
            font-size: 12px;
            /* 文本定位到条的右端。 */
            text-anchor: end;
        }

      </style>
   </head>
   <body>
      <script>
        // 3.定义条形数据
        let data=[10,23,5,8];
        // SVG的宽度。
        let width=1200,
        // 缩放到屏幕上可见的像素值。
        scaleFactor=20,
        // 这是水平条的静态高度。
        barHeight=30

        // 4.在d3中添加svg的元素
        let graph=d3.select("body").append("svg").attr("width",width).attr("height",barHeight*data.length)

        let bar=graph.selectAll("g").data(data).enter().append("g").attr("transform",function(d,i){return "translate(0," +i*barHeight+")";})
         bar.append("rect").attr("width",function(d){
            return d*scaleFactor
         }).attr("height",barHeight-1)

         bar.append("text")
        .attr("x", function(d) { return (d*scaleFactor); })
        .attr("y", barHeight/2)
        .attr("dy", ".35em")
        .text(function(d) { return d; });

     
      </script>
   </body>
</html>